<template>
  <div v-drag>
    <div class="mask" @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>{{uid?'修改':'新增'}}账号</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body" >
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>用户类型：</span>
          <div :class="{'error_border':tip_num===1}">
<!--            :disabled="Boolean(uid)"-->
            <el-select

              filterable
              v-model="typeId"
              placeholder="请选择用户类型">
              <el-option
                v-for="(item,index) in typeOption"
                :key="index"
                :label="item.name"
                :value="item.type">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>账号：</span>
          <div :class="{'error_border':tip_num===2}">
            <el-input type="text" placeholder="请输入账号"  v-model.trim="userName"
                      @input="infoTip='',tip_num=''"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>密码：</span>
          <div :class="{'error_border':tip_num===3}">
            <el-input type="password" placeholder="密码需包含字母和数字"  v-model.trim="password"
                      @input="infoTip='',tip_num=''"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>姓名：</span>
          <div :class="{'error_border':tip_num===4}">
            <el-input type="text" placeholder="请输入姓名"  v-model.trim="trueName"
                      @input="infoTip='',tip_num=''"></el-input>
          </div>
        </div>
        <div class="line" :class="{'error_border':tip_num===6}" >
          <span class="lab"><i class="mark_icon">*</i>手机号：</span>
          <div :class="{'error_border':tip_num===6}" >
            <el-input type="text" placeholder="请输入手机号"
                      v-model.trim="phone"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab">邮箱：</span>
          <div :class="{'error_border':tip_num===7}" >
            <el-input type="text"  placeholder="请输入邮箱"
                      v-model.trim="email"></el-input>
          </div>
        </div>

        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>人脸图像：</span>
          <div style="width: 150px;overflow: hidden" :class="{'error_border':tip_num===5}" >
            <el-upload
              :data="param"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="avatarSuccess"
              :before-upload="avatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i class="el-icon-plus avatar-uploader-icon" v-else></i>
            </el-upload>
          </div>
        </div>
<!--        <div class="line">-->
<!--          <span class="lab">状态：</span>-->
<!--          <div>-->
<!--            <el-radio-group v-model="proStatus">-->
<!--              <el-radio :label="1">可用</el-radio>-->
<!--              <el-radio :label="0">禁用</el-radio>-->
<!--            </el-radio-group>-->
<!--          </div>-->
<!--        </div>-->
        <p class="error_line">{{infoTip}}</p>
      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>

import commons from "@/utils/common";
import {restUrl} from "../../../../url";
import {addData, getDetail, updateData} from "@/api/sys/user";
import {getSelect} from "@/api/sys/role";

export default {
  props:['uid'],
  data(){
    return {
      param: {folder: 'web/user'},
      uploadUrl: restUrl + '/common/upload',
      password:'',
      userName:'',
      trueName:'',
      imageUrl:'',
      phone: '',
      email:'',
      role:'',
      roleOptions:[],
      typeId:'',
      typeOption:[],
      proStatus:1,
      infoTip: '',
      tip_num: '',
      loading:false
    }
  },
  mounted() {
    this.getType();
    if (this.uid){
      this.getDetail();
    }
  },
  methods:{
    getDetail(){
      let that = this;
      that.loading = true;
      getDetail(that.uid).then(res => {
        if (res){
          that.setData(res);
        }
        that.loading = false;
      }).catch((e) => {
        that.loading = false;
      });
    },

    setData(obj){
      this.userName = obj.username;
      this.imageUrl = obj.photoUrl;
      // this.proStatus = obj.enable ? obj.enable : 0;
      this.phone = obj.phone ? obj.phone : '';
      this.password = obj.password ? obj.password : '';
      this.typeId = obj.type ? obj.type :0;
      this.trueName= obj.name? obj.name:'';
      this.email= obj.email? obj.email:'';
    },

    // 获取类型
    getType(){
      getSelect().then(res => {
        this.typeOption = res?res:[];
        this.typeId = res?this.typeOption[0].id:'';
      }).catch((e) => {});
    },

    // 上传图标
    avatarUpload(file) {
      this.setTip('', '');
      this.loading = true;
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error({
          message:'上传图像大小不能超过 10MB!',
          duration:1500
        });
      }
      return isLt10M;
    },

    // 图标上传回调
    avatarSuccess(res, file) {
      if (file.response.success) {
        this.imageUrl = file.response.data;
        this.$message.success({
          duration:1500,
          message:'上传成功！'
        });
      } else {
        this.$message.error({
          message:'上传失败，请重试',
          duration:1500
        });
      }
      this.loading = false;
    },

    confirmEdit(){
      if (this.typeId === '') {
        this.setTip(1, '请选择用户类型！');
      } else if (this.userName === '') {
        this.setTip(2, '请输入账号！');
      }  else if (this.password==='') {
        this.setTip(3, '请输入密码！');
      }
      else if(Boolean(commons.judgePwd(this.password))) {
        this.setTip(3,'密码大于6位包含字母和数字！');
      }
        else if (this.trueName === '') {
        this.setTip(4, '请输入姓名！');
      }else if (this.imageUrl === '') {
        this.setTip(5, '请上传头像！');
      }else if (this.phone=='' || Boolean((!commons.judgePhone(this.phone)))) {
        this.setTip(6, '请输入正确的手机号！');
      }else if (this.email&&(commons.judgeEmail(this.email))) {
        this.setTip(7, '请输入正确的邮箱号！');
      } else {
        this.sendInfo();
      }
    },

    sendInfo() {
      let that = this;
      that.loading = true;
      let data = {
        // enable: this.proStatus,
        photoUrl: this.imageUrl,
        username: this.userName,
        password: this.password,
        phone:that.phone,
        type:that.typeId,
        name:that.trueName,
        email:that.email
      }
      if (that.uid) {
        data.id = that.uid;
        updateData(JSON.stringify(data)).then(response => {
          that.closePopup(true);
          that.$message.success({
            message:'操作成功！',
            duration:1500
          });
          that.loading = false;
        }).catch((e) => {
          that.loading = false;
        });
      } else {
        addData(JSON.stringify(data)).then(response => {
          that.closePopup(true);
          that.$message.success({
            message:'操作成功！',
            duration:1500
          });
          that.loading = false;
        }).catch((e) => {
          that.loading = false;
        });
      }
    },

    setTip(num,text){
      this.tip_num = num;
      this.infoTip = text
    },

    // 关闭
    closePopup(refresh){
      this.$emit('listenToChild', {refresh: refresh})
    }
  }
}
</script>

<style scoped>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #60BAE7;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #DCDFE6;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border: 1px solid #DCDFE6;
  border-radius: 6px;
}

.avatar {
  max-width: 210px;
  min-width: 60px;
  height:80px;
  display: block;
  border-radius: 6px;
  margin-right: 15px;
  /*border: 1px solid #bbb;*/
}
.avatar_icon{
  max-width: 130px;
  height: 40px;
  object-fit: cover;
  cursor: pointer;
}
</style>
